<template>
	<view>
		<view class="head">
			<image src="../../static/image/logo.png"></image>
			<view class="title">账号密码登录</view>
		</view>
		<view class="cont">
			<input type="text" v-model="phone" placeholder="请输入账号/邮箱" placeholder-class="inputDefault" />
			<input type="password" v-model="password" placeholder="请输入6-16位密码" placeholder-class="inputDefault" />
			<view class="button" @click="Quick">登录</view>
		</view>
		<view class="tips">
			<view @click="forget">忘记密码</view>
			<view class="tips-right">
				<text @click="handelHelp">帮助</text>
				<text @click="Quick(0)">手机快捷登录</text>
			</view>
		</view>
		<view class="agreement" @tap="switchCheck">
			<radio color="#FF9900" :checked="isChecked" />
			<view class="agreement-tips">我已阅读并同意<text @tap.stop="treaty">《智助教育服务条款》</text>、<text @tap.stop="treaty">《隐私协议》</text></view>
		</view>
	</view>
</template>

<script>
	import Checker from '@/common/graceChecker.js';
	export default {
		data() {
			return {
				phone: '', //账号
				password: '', //密码
				isChecked: false, //是否勾选协议
			}
		},
		methods: {
			// 登录
			Quick(type) {
				if (type == 0) { //手机快捷登录
					uni.navigateTo({
						url: 'login-local'
					})
				} else {
					if (this.isChecked) {
						//验证规则
						var rule = [{
							name: 'phone',
							checkType: 'phoneno',
							checkRule: '',
							errorMsg: '请输入正确的手机号'
						},
						{
							name: 'pwd',
							checkType: 'notnull',
							checkRule: '',
							errorMsg: '密码不能为空'
						}];
						//验证数据
						var data = {
							phone: this.phone,
							pwd: this.password
						};
						var getCheck = Checker.check(data, rule);
						if (!getCheck) {
							uni.showToast({
								title: Checker.error,
								icon: 'none'
							});
							return;
						}
					} else {
						uni.showToast({
							title: '请勾选协议',
							icon: 'none'
						})
					}
				}
			},
			// 勾选协议&取消勾选协议
			switchCheck() {
				this.isChecked = !this.isChecked;
			},
			// 跳转协议
			treaty() {
				this.isChecked = false;
				uni.navigateTo({
					url: 'clause'
				})
			},
			// 忘记密码
			forget() {
				uni.showModal({
					content: '如果您忘记密码，可使用手机验证码登录后修改密码。',
					confirmColor: '#FF9900',
					confirmText: '用验证码登录',
					cancelColor: '#C0C4CC',
					cancelText: '再想想',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: 'login-phone'
							})
						}
					}
				})
			},
			// 帮助
			handelHelp() {
				uni.showModal({
					title: '联系客服',
					content: '客服电话：0756-8599961',
					cancelColor: '#C0C4CC',
					confirmColor: '#FF9900',
					confirmText: '复制电话',
					success(res) {
						if (res.confirm) {
							uni.setClipboardData({
								data: '0756-8599961',
								success() {
									uni.showToast({
										title: '复制成功',
										icon: 'none'
									})
								},
								fail() {
									uni.showToast({
										title: '复制失败',
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
		}
	}
</script>

<style>
	.head {
		display: flex;
		align-items: center;
		margin: 22upx 0 75upx 12upx;
	}

	.head image {
		width: 128upx;
		height: 128upx;
	}

	.title {
		color: #414141;
		font-size: 36upx;
		font-weight: bold;
	}

	.cont {
		margin: 0 24upx;
	}

	input {
		height: 86upx;
		line-height: 80upx;
		text-indent: 50upx;
		background: #F4F7FC;
		box-shadow: 0upx 2upx 4upx rgba(0, 0, 0, 0.12);
		border-radius: 49upx;
		margin-bottom: 40upx;
	}

	.inputDefault {
		color: #C3C3C3;
		font-size: 30upx;
	}

	.button {
		color: #FFFFFF;
		height: 98upx;
		line-height: 98upx;
		width: 100%;
		font-size: 36upx;
		text-align: center;
		background: #FF9900;
		border-radius: 50upx;
		margin: 94upx 0 24upx;
	}

	.tips {
		color: #666666;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 30upx;
	}

	.tips view {
		font-size: 24upx !important;
	}

	.tips-right {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.tips-right text {
		margin-left: 32upx;
	}

	.tips-right text:first-child {
		color: #C0C4CC;
	}

	.agreement {
		margin: 0 80upx;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		position: absolute;
		bottom: 147upx;
	}
	
	radio {
		transform: scale(0.7);
	}
	
	uni-radio .uni-radio-input:hover{
		border-color: #FF9900 !important;
	}
	
	.agreement-tips {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	
	.agreement-tips text {
		color: #FF9900;
	}
</style>
